<template>
	<view>
		<view class="padding-top-32 padding-left-32 padding-right-32">
			<view class="flex align-center justify-between">
				<view v-if="vuex_token" class="flex align-center">
					<image :src="vuex_user.avatar" class="head-img-class"></image>
					<text class="head-name">{{vuex_user.nickname}}</text>
				</view>
				<view v-else @click="goPage('/pages/login/selLogin')"  class="flex align-center">
					<image src="https://txr001.zthj.net/static/img/avatar.png" class="head-img-class"></image>
					<text class="head-name">登录青牒</text>
				</view>

				<view @click="goPage('/pages/index/notice',true)" >
					<image src="https://txr001.zthj.net/static/img/notice.png" class="notice-img"></image>
					<view v-if="indexData.new_message > 0" class="unread-content"></view>
				</view>
			</view>
			<view class="padding-top-32 flex align-center justify-between">
				<view class="my-number-id" @click="goPage('/pages/index/myNumberId',true)">
					<image src="https://txr001.zthj.net/static/img/szid.png" class="img-40"></image>
					<text class="my-number-text">获取我的数字ID</text>
					<image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
				</view>
				<view class="my-number-id" @click="showModalfn">
					<image src="https://txr001.zthj.net/static/img/qyzs.png" class="img-40"></image>
					<text class="my-number-text">获取对公数字ID</text>
					<image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
				</view>
			</view>
			<view class="padding-top-64 text-0101 text-lg text-bold-600">
				我的数字网络
			</view>
			<view class="enterprise-name">
				<view class="view-name">
					{{indexData.my_company  ? indexData.my_company : '未绑定企业' }}
				</view>
				<view  @click="goPage('/subpackage/pages/voucher/dataAssociation',true)">
					<a href="" class="a-name">全部链接组织</a>
				</view>
			</view>
			<view class="enterprise-display padding-top-64">
				<view class="enterprise-display-left">
					<view class="left" @click="goPageValue(value,true)">
						<image src="https://txr001.zthj.net/static/icon/+.png" class="img-48"></image>
					</view>
					<view class="view-default">
						<span class="span">
							{{indexData.my_count  ? indexData.my_count : value }}
						</span>
					</view>
					<view class="" style="color: #010101; font-size: 12px;">
						已链接组织
					</view>
				</view>
				<view class="enterprise-display-center"></view>
				<view class="enterprise-display-right">
					<view class="right" @click="goPageRecharge()">
						<image src="https://txr001.zthj.net/static/icon/+.png" class="img-48"></image>
					</view>
					<view class="view-default">
						<span class="span-name">
							{{indexData.energy || 0}}
						</span>
					</view>
					<view class="" style="color: #010101; font-size: 12px;">
						数据能量
						<image src="https://txr001.zthj.net/static/icon/wen.png" class="img-32"
							style="margin-left: 5px;" @touchstart="mousemoveany"></image>
					</view>
				</view>
			</view>
            <view class="energy-mask" v-if="tooilp" @click="tooilp = false"></view>
			<view id="tootlip" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/icon/tootip.png)'}]"
				v-if="tooilp"  @click="tooilp = false">
				<view class="">说明：</view>
				<view class="">1 本次充值仅限于在平台消费,无法跨地区跨站点使用。</view>
				<view class="">2 若遇到充值未到账,请联系客服。</view>
			</view>

			<view class="padding-top-64 text-0101 text-lg text-bold-600">
				碳管理
			</view>

			<view class="carbon-management-box">
				<view class="carbon-management margin-top-32">
					<view class="carbon-management-title">
						<view class="view-name">  
							数据管理
						</view>
						<view>
							<a href="" @click="dataMore" style="color: #fff;">更多</a>
						</view>
					</view>
					<view class="flex align-center justify-around" style="position: relative;">
						<view class="carbon-management-view" @click="goPage('/subpackage/pages/voucher/index',true)">
							<view class="carbon-management-icon">
								<image src="https://txr001.zthj.net/static/icon/wjdt.png" class="img-100"></image>
							</view>
							<view v-if="indexData.my_daka > 0" class="notice-count">
                                {{ indexData.my_daka }}
							</view>
							<view>打卡与问卷</view>
						</view>
						<!-- @click="goPage('/pages/questionnaire/questionnaire',true)" -->
						<view class="carbon-management-view" @click="handleRecord">
							<view class="carbon-management-icon">
								<image src="https://txr001.zthj.net/static/icon/jlfx@2x.png" class="img-100"></image>
							</view>
							<view v-if="false" class="notice-count-question">
								0
							</view>
							<view>记录与分析</view>
						</view>
						<view class="carbon-management-view" @click="goPage('/pages/carAccount/index')">
							<view class="carbon-management-icon">
								<image src="https://txr001.zthj.net/static/icon/pfhs@2x.png" class="img-100"></image>
							</view>
							<view v-if="false" class="notice-count-ques-tion">
								0
							</view>
							<view>碳数据核算</view>
						</view>
					</view>
				</view>

				<view class="margin-top-32 flex align-center justify-between">
					<view class="text-center" @click="goPage('/pages/carManage/index?id=1',true)">
						<view class="qing-content">
							<image src="https://txr001.zthj.net/static/icon/rygl.png" class="img-80"></image>
						</view>
						<view>人员管理</view>
					</view>
					<view class="text-center" @click="goPage('/pages/carManage/index?id=2',true)">
						<view class="qing-content">
							<image src="https://txr001.zthj.net/static/img/tph.png" class="img-80"></image>
						</view>
						<view>技术管理</view>
					</view>
					<view class="text-center" @click="goPage('/pages/carManage/index?id=3',true)">
						<view class="qing-content">
							<image src="https://txr001.zthj.net/static/icon/zcgl.png" class="img-80"></image>
						</view>
						<view>资产管理</view>
					</view>
					<view class="text-center" @click="goPage('/pages/carManage/index?id=4',true)">
						<view class="qing-content">
							<image src="https://txr001.zthj.net/static/img/tgl.png" class="img-80"></image>
						</view>
						<view>供应链管理</view>
					</view>
				</view>
				<view class="margin-top-32 flex align-center">
					<view class="text-center" @click="goPage('/pages/carManage/index?id=5',true)">
						<view class="qing-content">
							<image src="https://txr001.zthj.net/static/icon/zcfx.png" class="img-80"></image>
						</view>
						<view>政策与风险</view>
					</view>
				</view>
			</view>


			<view class="padding-top-64 text-0101 text-lg text-bold-600">
				碳评价
			</view>
			<view class=" carbon-management-color margin-top-32 flex align-center justify-between">
				<view class="text-center" @click="goPage('/pages/carEvaluate/index?id=0',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/lsjx.png" class="img-80"></image>
					</view>
					<view>绿色绩效</view>
				</view>
				<view class="text-center" @click="goPage('/pages/carEvaluate/index?id=1',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/lsrz.png" class="img-80"></image>
					</view>
					<view>绿色认证</view>
				</view>
				<view class="text-center" @click="goPage('/pages/carEvaluate/index?id=2',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/esg.png" class="img-80"></image>
					</view>
					<view> ESG </view>
				</view>
				<view class="text-center" @click="goPage('/pages/carEvaluate/index?id=3')">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/cbam.png" class="img-80"></image>
					</view>
					<view>CBAM</view>
				</view>
			</view>


			<view class="padding-top-64 text-0101 text-lg text-bold-600">
				碳普惠
			</view>
			<view class=" carbon-management-color margin-top-32 flex align-center">
				<view class="text-center" @click="goPage('/pages/carInclusion/index?id=0',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/hpxm.png" class="img-80"></image>
					</view>
					<view>普惠项目</view>
				</view>
				<view class="text-center" @click="goPage('/pages/carInclusion/index?id=1',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/zytzh.png" class="img-80"></image>
					</view>
					<view>自愿碳中和</view>
				</view>
			</view>


			<view class="padding-top-64 text-0101 text-lg text-bold-600">
				低碳市场
			</view>
			<view class=" carbon-management-color margin-top-32 flex align-center">
				<view class="text-center" @click="goPage('/pages/carMarket/index?id=0',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/tsc.png" class="img-80"></image>
					</view>
					<view>碳市场</view>
				</view>
				<view class="text-center" @click="goPage('/pages/carMarket/index?id=1',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/lsjr.png" class="img-80"></image>
					</view>
					<view>绿色金融</view>
				</view>
				<view class="text-center" @click="goPage('/pages/carMarket/index?id=2',true)">
					<view class="qing-content">
						<image src="https://txr001.zthj.net/static/icon/cpfw.png" class="img-80"></image>
					</view>
					<view>绿色产品与服务</view>
				</view>
			</view>

		</view>
		<view style="height: 100rpx;"></view>
		<!-- 遮罩层 -->
		<!-- 未绑定企业 -->
		<view class="btn" v-if="showModalValue" @click="btn">
			    <view class="mask" bindtap="close">
				<view class="personnel-top-value" :isBack="true">
					<view class="jqqd">暂未绑定企业,请绑定相关企业</view>
					<view class="button flex align-center justify-around">
						<view style="" @click="showModalValue=false">取消</view>
						<view class="xian"></view>
						<view style="color: #24458E;" @click="goBinding">去绑定</view>
					</view>
				</view>
			</view>
			    </view>
		<!-- 绑定企业 -->
		<view class="cu-modal" :class="modalName=='center'?'show':''" @tap="hideModal">
			<view class="cu-dialog text-left">
				<view class="company-bg-content"
					:style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/comBg.png)'}]">
					<view class="title">企业/组织</view>
					<view class="title-desc">ORGANIZATION</view>
					<view class="btn-content">
						<button class="cu-btn upload-btn"
							@click="goPage('/subpackage/pages/mine/company/baseInfo?type=1',true)">负责人/代表</button>
						<button class="cu-btn upload-btn" @click="toAddEmp('C')">工作人员</button>
					</view>
				</view>

				<view class="company-bg-content margin-top-32"
					:style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/orgBg.png)'}]">
					<view class="title">政府/管理部门</view>
					<view class="title-desc">GOVERNMENT / ADMINISTRATION</view>
					<view class="btn-content">
						<button class="cu-btn upload-btn"
							@click="goPage('/subpackage/pages/mine/company/baseInfo?type=2',true)">负责人/代表</button>
						<button class="cu-btn upload-btn" @click="toAddEmp('G')">工作人员</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 提示框 -->

	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchBarTop: 0, //搜索栏的外边框高度，单位px
				searchBarHeight: 0,
				value: '- -',
				showModalValue: false,
				modalName: null,
				tooilp: false,
                indexData: {}
			}
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				this.$u.vuex('vuex_user', {});
			}
			//移除事件监听
			// uni.$off('uAvatarCropper', this.upload);
		},
		onLoad() {
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.searchBarTop = menuButtonInfo.top;
			this.searchBarHeight = menuButtonInfo.height;
			// #endif
		},
		methods: {
			mousemoveany(e) {
				// let over = document.getElementById('tootlip');
				// over.style.display = 'block'
				this.tooilp = !this.tooilp
			},
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data.userInfo || {});
                this.indexData = res.data;
			},
			handleRecord() {
				uni.navigateTo({
					url:"/subpackage/pages/record/record"
				})
			},
			async showModalfn(e) {
				if (!this.vuex_token) {
					this.goPage('/pages/login/selLogin');
					return;
				}
				let res = await this.$api.getbindStatus();

				if (res.data.status == 1) {
					this.modalName = 'center'
				} else if (res.data.status == 2) {
					this.$u.toast('您提交的企业信息正在审核中！');
				} else {
					this.goPage('/pages/index/comNumberId')
				}
				// console.log("这里")

			},
			btn() {
				this.showModal = false
				this.showModalValue = false
			},
			goPageValue(value) {
				console.log(value)
				// if (value == '- -') {
				// 	this.showModalValue = !this.showModalValue
				// } else {
					uni.navigateTo({
						url: "/subpackage/pages/mine/addObject"
					})
				// }
			},
			goPageRecharge(value) {
                uni.navigateTo({
                    url: "/pages/carAccount/recharge"
                })
			},
			goBinding(e) {
				if (!this.vuex_token) {
					this.goPage('/pages/login/selLogin');
					return;
				}
				uni.navigateTo({
					url: "/subpackage/pages/voucher/dataLink"
				})
				// this.modalName = 'center'
			},
			hideModal(e) {
				this.modalName = null
			},
			toAddEmp(type) {
				uni.navigateTo({
					url: "/subpackage/pages/mine/empInfo?type=" + type
				})
			},
            dataMore(){
                uni.navigateTo({
                    url: "/pages/carManage/index?id=0"
                })
            }
		}
	}
</script>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<style scoped lang="less">
.energy-mask{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100vh;
    z-index:100;
}
	#tootlip {
		background-size: cover;
		width: 92%;
		height: 132rpx;
		font-size: 24rpx;
		color: #fff;
		padding: 3%;
        position: absolute;
        z-index:1000;
	}
	.tootlipbg{
		background-color: transparent;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.index-logo {
		width: 124rpx;
		height: 64rpx;
	}

	.top-search-btn {
		text-align: center;
		position: absolute;
		width: 100%;
	}

	.head-img-class {
		width: 96rpx;
		height: 96rpx;
		vertical-align: middle;
		border-radius: 50%;
	}

	.head-name {
		font-size: 48rpx;
		color: #767879;
		vertical-align: middle;
		padding-left: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;	
		width: 400rpx;
		height: 68rpx;
	}

	.notice-img {
		width: 48rpx;
		height: 48rpx;
	}

	.my-number-id {
		height: 80rpx;
		line-height: 80rpx;
		background: #F4F6F8;
		border-radius: 32rpx;
		padding: 0 24rpx;
	}

	.my-number-text {
		font-size: 26rpx;
		font-weight: 400;
		color: #010101;
		vertical-align: middle;
		padding-left: 8rpx;
		padding-right: 18rpx;
	}

	.index-center-content {
		width: 176rpx;
		height: 176rpx;
		border-radius: 100%;
		border: 4rpx solid #F4F6F8;
		text-align: center;
		padding-top: 35rpx;
	}

	.qing-content {
		width: 150rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.number-net-content {
		background-size: 100% 100%;
		width: 614rpx;
		height: 512rpx;
		margin-top: 12rpx;
		margin-bottom: 66rpx;
		position: relative;
		overflow: hidden;
	}

	.number-top {
		font-size: 72rpx;
		font-weight: bold;
		color: #010101;
	}

	.number-top-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #010101;
	}

	.number-net-2 {
		position: absolute;
		right: 90rpx;
		top: 60rpx;
	}

	.number-net-3 {
		position: absolute;
		left: 60rpx;
		top: 200rpx;
	}

	.number-net-1 {
		position: absolute;
		left: 230rpx;
		top: 220rpx;
		width: 180rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.number-net-img {
		position: absolute;
		right: 144rpx;
		top: 406rpx;
	}

	.mine-company-content {
		margin-top: 36rpx;
	}

	.left-content {
		background: #FFFFFF;
		border-radius: 48rpx;
		padding: 24rpx;
		width: 328rpx;
	}

	.unread-content {
		
		width: 16rpx;
		height: 16rpx;
		background: #E2323C;
		border-radius: 100%;
		float: right;
		/* margin-top: 14rpx; */
		
	}

	.mine-number {
		font-size: 144rpx;
		font-weight: 500;
		color: #010101;
		padding: 40rpx 0;
	}

	.num-bf {
		height: 106rpx;
		line-height: 84rpx;
		font-size: 72rpx;
		font-weight: 600;
		color: #010101;
		/* padding: 10rpx 0; */
		padding-top: 16rpx;
	}

	.very-img-class {
		width: 328rpx;
		height: 342rpx;
	}

	.update-content {
		margin-top: 20rpx;
		/* width: 64rpx; */
		height: 30rpx;
		line-height: 30rpx;
		background: #24458E;
		border-radius: 18rpx;
		font-size: 16rpx;
		font-weight: 600;
		color: #FFFFFF;
		padding: 0 8rpx;
	}

	.indexC-content {
		background-size: 100% 100%;
		width: 100%;
		height: 420rpx;
		margin-top: 32rpx;
	}

	.notice-count {
		width: 40rpx;
		height: 26rpx;
		background: #24458E;
		border-radius: 13rpx;
		font-size: 20rpx;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		left: 160rpx;
		top: 24rpx;
	}

	.notice-count-question {
		width: 40rpx;
		height: 26rpx;
		background: #24458E;
		border-radius: 13rpx;
		font-size: 20rpx;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		right: 262rpx;
		top: 24rpx;
	}

	.notice-count-ques-tion {
		width: 40rpx;
		height: 26rpx;
		background: #24458E;
		border-radius: 13rpx;
		font-size: 20rpx;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		right: 15rpx;
		top: 24rpx;
	}

	.enterprise-name {
		display: flex;
		justify-content: space-between;

		.view-name {
			color: #767879;
			font-size: 12px;
		}

		.a-name {
			color: #010101;
			font-size: 12px;
			text-decoration:underline;
		}
	}

	.enterprise-display {
		height: 150px;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.enterprise-display-left {
			width: 59%;

			.left {
				// width: 40px;height: 40px;border-radius:50%;opacity: 1;background-color: #24458E;
				float: right;
				margin-right: 20px;

				.view-icon {
					font-size: 24px;
					color: #ffffff;
				}

			}
		}

		.enterprise-display-center {
			height: 100%;
			width: 2%;
			border-left: 1px solid #ccc;
		}

		.enterprise-display-right {
			width: 39%;
			padding-left: 5%;

			.right {
				// width: 40px;height: 40px;border-radius:50%;opacity: 1;background-color: #24458E;
				float: right;

				.view-icon {
					font-size: 24px;
					color: #ffffff;
				}
			}
		}
	}

	.view-default {
		height: 100px;
		line-height: 110px;

		.span {
			font-weight: 600;
			color: #010101;
			font-size: 160rpx;
		}

		.span-name {
			font-weight: 600;
			color: #010101;
			font-size: 64rpx;
		}
	}

	.carbon-management-color {
		color: #010101;
		width: 100%;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;
		font-size: 12px;

		.carbon-management-view {
			.carbon-management-icon {
				width: 96rpx;
				height: 96rpx;
				background: #15B699;
				border-radius: 50%;
				opacity: 0.7;
				align-items: center;
			}
		}
	}

	.carbon-management-box {
		height: 360px;
		width: 100%;
		background: #fff;
		border-radius: 0px 0px 24px 24px;
		opacity: 1;
		font-size: 12px;

		.carbon-management {
			width: 100%;
			height: 125px;
			background: #0FBC77;
			border-radius: 24px 24px 24px 24px;
			opacity: 1;

			.carbon-management-title {
				display: flex;
				justify-content: space-between;
				color: #fff;
				padding: 10px;
			}

			.carbon-management-view {
				color: #fff;

				.carbon-management-icon {
					width: 96rpx;
					height: 96rpx;
					background: #15B699;
					border-radius: 50%;
					opacity: 0.7;
					color: #fff;
					align-items: center;
				}
			}
		}
	}

	.btn {
		width: 100%;
		height: 100%;
		padding: 6%;

		.mask {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.4);

		}

		.personnel-top {
			width: 484rpx;
			height: 484rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			opacity: 1;
			text-align: center;

			.icon-img {
				margin-top: 130rpx;
				width: 42px;
				height: 58.39px;
			}

			.jqqd {
				margin-top: 40rpx;
				font-size: 16px;
				color: #000000;
			}
		}

		.personnel-top-value {
			width: 220px;
			height: 142px;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			opacity: 1;
			text-align: center;

			.jqqd {
				margin-top: 40rpx;
				font-size: 14px;
				color: #000000;
				padding: 8%;
				border-bottom: 1px solid #ccc;
			}

			.button {
				line-height: 50px;

				.xian {
					width: 1px;
					height: 47px;
					background-color: #ccc;
					margin-top: -5px;
				}
			}
		}
	}

	.company-bg-content {
		background-size: 100% 100%;
		width: 100%;
		height: 312rpx;
		padding: 40rpx;

		.title {
			font-size: 48rpx;
			font-weight: 600;
			color: #010101;
		}

		.title-desc {
			padding-top: 8rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #DEE0E1;
		}

		.btn-content {
			margin-top: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.upload-btn {
				width: 278rpx;
				height: 64rpx;
				background: #24458E;
				border-radius: 39rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>